<!-- 底部对话框 -->
<template>
  <div class="dialog-bottom" :style="dialogStyle">
    <div class="dialog-mask" @click="clickMask"></div>
    <div
      class="dialog-core"
      @click="clickCore"
      :style="'transition: max-height ' + duration + 'ms ease 0ms;' + coreStyle"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    // 高度过渡的时间,单位ms
    duration: {
      type: Number,
      default: 400
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogStyle: "display: none;",
      coreStyle: "max-height: 0%;"
    };
  },
  components: {},
  methods: {
    clickMask(e) {
      this.$emit("clickDialogMask", e);
    },
    clickCore(e) {
      this.$emit("clickDialogCore", e);
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        this.dialogStyle = "";
        setTimeout(() => {
          this.coreStyle = "max-height: 90%";
        }, 50);
      } else {
        this.coreStyle = "max-height: 0%;";
        setTimeout(() => {
          this.dialogStyle = "display: none;";
        }, this.duration);
      }
    }
  }
};
</script>

<style scoped>
.dialog-bottom {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9;

  display: flex;
  flex-direction: column;
}
.dialog-mask {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
}
.dialog-core {
  max-height: 0;
  background: #fff;
}
</style>
